<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">设备列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="设备ID">
						<el-input v-model="params.device_id" placeholder="请输入设备ID" clearable></el-input>
					</el-form-item>
					<el-form-item label="设备名称">
						<el-input v-model="params.device_name" placeholder="请输入设备名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="params.online_state" placeholder="请选择" clearable>
							<el-option label="在线" :value="1"></el-option>
							<el-option label="离线" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属站点">
						<el-select v-model="params.site_id" placeholder="请选择" filterable style="width:100%" clearable>
							<el-option v-for="item in sites" :key="item.site_id" :label="item.site_name"
								:value="item.site_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="sousuo()" icon="el-icon-search">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="add()" icon="el-icon-circle-plus-outline">添加</el-button>
					</el-form-item>
				</el-form>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="device_id" align="center" label="设备ID" width="120"></el-table-column>
					<el-table-column prop="device_name" align="center" label="设备名称" min-width="120"></el-table-column>
					<el-table-column label="二维码" width="80px">
						<template slot-scope="scope">
							<el-image style="width: 50px; height: 50px" :src="scope.row.qrCode"
								:preview-src-list="[scope.row.qrCode]">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="site_name" align="center" label="所属站点" min-width="120"></el-table-column>
					<el-table-column prop="device_type" align="center" label="设备类型" min-width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.device_type == 1">组网版</span>
							<span v-if="scope.row.device_type == 2">十路机</span>
							<span v-if="scope.row.device_type == 3">十二路机</span>
						</template>
					</el-table-column>
					<el-table-column prop="online_state" align="center" label="在线状态" min-width="100">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.online_state == 1" type="success">在线</el-tag>
							<el-tag v-if="scope.row.online_state == 2" type="danger">离线</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="ARPU" align="center" label="近七日ARPU值" min-width="100"></el-table-column>
					<el-table-column prop="usageRate" align="center" label="近七日插孔使用率" min-width="100"></el-table-column>
					<el-table-column prop="max_power" align="center" label="最大输出功率(W)" min-width="100"></el-table-column>
					<el-table-column prop="fee_template_name" align="center" label="收费模板" min-width="100"></el-table-column>
					<el-table-column prop="share_template_name" align="center" label="分账模板"
						min-width="100"></el-table-column>
					<el-table-column prop="uid" label="插座UID" align="center" min-width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.device_type == 1">{{ scope.row.uid }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="device_id" label="网关ID" align="center" min-width="100">
						<template slot-scope="scope">
							<span v-if="scope.row.device_type == 1">{{ scope.row.device_id }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="site_address" label="地址信息" align="center" min-width="130"></el-table-column>
					<el-table-column prop="createtime" width="160" label="创建时间" align="center"></el-table-column>
					<el-table-column label="操作" fixed="right" width="260" align="center">
						<template slot-scope="scope">
							<el-button size="mini" @click="setPowerOpen(scope.row.device_id)">设置功率</el-button>
							<el-button size="mini" @click="set(scope.row)">编辑</el-button>
							<el-button size="mini" @click="openDel(scope.row.device_id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount" prev-text="上一页"
					next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>

		<el-dialog :title="form.id ? '修改设备' : '添加设备'" :visible.sync="dialogVisible" width="500px">
			<el-form ref="form" :model="form" label-width="100px" class="form">
				<el-form-item label="设备名称">
					<el-input placeholder="请输入设备名称" v-model="form.device_name"></el-input>
				</el-form-item>
				<el-form-item label="设备类型">
					<el-radio-group :disabled="form.id ? true : false" v-model="form.device_type">
						<el-radio :label="1">组网版</el-radio>
						<el-radio :label="2">十路机</el-radio>
						<el-radio :label="3">十二路机</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.device_type && form.device_type != 1" label="设备ID">
					<el-input :disabled="form.id ? true : false" placeholder="请输入设备ID" v-model="form.device_id"></el-input>
				</el-form-item>
				<el-form-item v-if="form.device_type == 1" label="网关ID">
					<el-input :disabled="form.id ? true : false" placeholder="请输入网关ID" v-model="form.device_id"></el-input>
				</el-form-item>
				<el-form-item v-if="form.device_type == 1" label="插座UID">
					<el-input :disabled="form.id ? true : false" placeholder="请输入插座UID" v-model="form.uid"></el-input>
				</el-form-item>
				<el-form-item label="所属站点">
					<el-select v-model="form.site_id" placeholder="请选择" filterable style="width:100%" clearable>
						<el-option v-for="item in sites" :key="item.site_id" :label="item.site_name"
							:value="item.site_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="分账模板">
					<el-select v-model="form.share_template_id" filterable style="width:100%" placeholder="请选择" clearable>
						<el-option v-for="(item, index) in shareTemplateList" :key="index" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="费用模板">
					<el-select v-model="form.fee_template_id" filterable style="width:100%" placeholder="请选择" clearable>
						<el-option v-for="(item, index) in chargingTemplateList" :key="index" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save()">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 功率设置 -->
		<el-dialog title="设置最大输出功率值(W)" :visible.sync="dialogVisible2" width="400px">
			<el-input v-model="setItem.maxPower" placeholder="请输入最大输出功率值"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="setPower()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { query, save, del } from '@/api/equipment-admin';
import { add_edit } from '@/api/site-admin';
import { getSite, setPower } from '@/api/pile-point-admin';
export default {
	name: 'equipment-admin',
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			params: {
				device_id: '',
				device_name: '',
				site_id: '',
				online_state: ''
			},
			name: '',
			form: {
				id: '',
				device_id: '',
				uid: '',
				device_name: '',
				device_type: '',
				site_id: '',
				fee_template_id: '',
				share_template_id: ''
			},
			dialogVisible: false,
			dialogVisible2: false,
			sites: [],
			shareTemplateList: [],
			chargingTemplateList: [],
			setItem: {}
		};
	},

	created() {
		this.addEditInit();
		this.getSite();
		this.getData();
	},
	methods: {
		// 获取费用模板
		addEditInit() {
			add_edit({},false).then(res => {
				if (res.state) {
					this.chargingTemplateList = res.data.chargingTemplateList
					this.shareTemplateList = res.data.shareTemplateList
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 获取站点
		getSite() {
			getSite({ type: 1 },false).then(res => {
				if (res.state) {
					this.sites = res.data.sitelist
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 设置最大功率
		setPowerOpen(deviceId) {
			this.setItem = {
				deviceId: deviceId,
				maxPower: ''
			}
			this.dialogVisible2 = true;
		},
		setPower() {
			if (!this.setItem.maxPower) {
				this.$message.error('请设置最大功率！');
				return
			}
			setPower(this.setItem).then(res => {
				if (res.state) {
					this.getData();
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					this.dialogVisible2 = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 获取数据
		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize,
				device_id: this.params.device_id,
				device_name: this.params.device_name,
				site_id: this.params.site_id,
				online_state: this.params.online_state
			};
			query(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 添加修改
		save() {
			if (!this.form.device_name) {
				this.$message.error('请输入设备名称！');
				return;
			}
			if (!this.form.device_type) {
				this.$message.error('请选择设备类型！');
				return;
			}
			if (!this.form.device_id && this.form.device_type != 1) {
				this.$message.error('请输入设备id！');
				return;
			}
			if (!this.form.device_id && this.form.device_type == 1) {
				this.$message.error('请输入网关ID！');
				return;
			}
			if (!this.form.uid && this.form.device_type == 1) {
				this.$message.error('请输入插座UID！');
				return;
			}
			if (!this.form.site_id) {
				this.$message.error('请选择所属站点！');
				return;
			}
			if (!this.form.fee_template_id) {
				this.$message.error('请选择分账模板！');
				return;
			}
			if (!this.form.share_template_id) {
				this.$message.error('请选择费用模板！');
				return;
			}

			let data = {};

			data['device_name'] = this.form.device_name;
			data['device_type'] = this.form.device_type;
			data['site_id'] = this.form.site_id;
			data['device_id'] = this.form.device_id;
			data['uid'] = this.form.uid;
			data['fee_template_id'] = this.form.fee_template_id;
			data['share_template_id'] = this.form.share_template_id;

			save(data).then(res => {
				if (res.state) {
					if (!this.form.id) {
						this.currentPage = 1;
					}
					this.getData();
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					this.dialogVisible = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		add() {
			this.form = {
				id: '',
				device_id: '',
				uid: '',
				device_name: '',
				device_type: '',
				site_id: '',
				fee_template_id: '',
				share_template_id: ''
			};
			this.dialogVisible = true;
		},
		set(item) {
			let datas = JSON.parse(JSON.stringify(item));
			this.form = datas;
			this.form.device_type = Number(datas.device_type);
			this.form.site_id = Number(datas.site_id);
			this.form.share_template_id = Number(datas.share_template_id);
			this.form.fee_template_id = Number(datas.fee_template_id);
			this.form.id = 1
			this.dialogVisible = true;
		},
		openDel(id) {
			this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.del(id)
			}).catch(() => {

			});
		},
		del(id) {
			del({ id }).then(res => {
				if (res.state) {
					this.getData();
					this.$message({
						message: '删除成功！',
						type: 'success'
					});
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		sousuo(e) {
			this.currentPage = 1;
			this.getData();
		},
		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		}
	}
};
</script>
<style lang="scss" scoped>
.form {
	.title {
		line-height: 36px;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
		margin: 12px;
	}
}
</style>
